<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格-TableDemo</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
    <div class="table-responsive">
        <!-- 响应式表格，内容多且窗口缩小时，表格底部有滚动条-->
        <table class="table table-bordered">
            <!--
                table   基本表格
                table table-striped 条纹表格
                table table-striped table-bordered 条纹加边框表格
                table table-striped table-bordered table-hover 条纹加边框表格 鼠标经过
                table table-condensed   紧凑型表格
             -->
            <thead>
                <tr>
                    <th>标题</th>
                    <th>标题</th>
                    <th>标题</th>
                </tr>
            </thead>
            <tbody>
                <!-- 改变行颜色  -->
                <tr class="active">
                    <td>内容内容内容内容内容内容内容</td>
                    <td>内容内容内容内容内容内容内容</td>
                    <td>内容内容内容内容内容内容内容</td>
                </tr>
                <tr class="success">
                    <td>内容内容内容内容内容内容内容</td>
                    <td>内容内容内容内容内容内容内容</td>
                    <td>内容内容内容内容内容内容内容</td>
                </tr>
                <tr class="info">
                    <td>内容内容内容内容内容内容内容</td>
                    <td>内容内容内容内容内容内容内容</td>
                    <td>内容内容内容内容内容内容内容</td>
                </tr>
                <tr class="danger">
                    <td>内容内容内容内容内容内容内容</td>
                    <td>内容内容内容内容内容内容内容</td>
                    <td>内容内容内容内容内容内容内容</td>
                </tr>
                <tr>
                    <td>内容内容内容内容内容内容内容</td>
                    <td>内容内容内容内容内容内容内容</td>
                    <td>内容内容内容内容内容内容内容</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>